<script setup lang="ts">
import ComponentsMain from '@/components/ComponentsMain.vue';
import ComponentsEchartsExcel from '@/components/ComponentsEchartsExcel.vue';
import ComponentsEchartsExcel3D from '@/components/ComponentsEchartsExcel3D.vue';
import ComponentsEcharts3D from '@/components/ComponentsEcharts3D.vue';
import ComponentsEchartsWord from '@/components/ComponentsEchartsWord.vue';
import { ref, onBeforeMount, onBeforeUpdate } from 'vue';
import { useCounterStore } from './../stores/counter'
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router'
// 接收路由传参：
const route = useRoute()
const queryData = ref()
// 接收显示传参：
// const qd: any = route.query.data
// queryData.value = qd
// 接受params式传参：
console.log('接受params式传参', route.params)
queryData.value = route.params.data

const sfRef = ref(null);

let currentApp: {
    名称: string
    路由: string
    图标: string
    缩写: string
    类型: string
}

let childrenComponent: any = ComponentsMain

onBeforeMount(() => {
    const counterStore = useCounterStore()
    const { dynamicApp } = storeToRefs(counterStore)
    const activeApp = dynamicApp.value
    currentApp = activeApp.filter((a) => a.缩写 === queryData.value)[0]
    console.log('当前应用', currentApp, activeApp.filter((a) => a.缩写 === queryData.value))
    const { 类型 } = currentApp
    const appType = 类型;
    switch (appType) {
        case 'word':
            childrenComponent = ComponentsMain
            break;
        case 'excel':
            childrenComponent = ComponentsMain
            break;
        case 'echarts-excel':
            childrenComponent = ComponentsEchartsExcel
            break;
        case 'echarts-excel-3d':
            childrenComponent = ComponentsEchartsExcel3D
            break;
        case 'echarts-3d':
            childrenComponent = ComponentsEcharts3D
            break;
        case 'echarts-word':
            childrenComponent = ComponentsEchartsWord
            break;
        default:
            childrenComponent = ComponentsMain
            break;
    }
})
onBeforeUpdate(() => {
    console.log('路由参数更新')
})
</script>
<template>
    <component :is="childrenComponent" ref="sfRef" :title="currentApp['名称']" :icon="currentApp['图标']"
        :appId="currentApp['缩写']" :currentApp>
    </component>
</template>
<style scoped></style>